
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh_cn">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>4.14.&nbsp;&#33719;&#21462;&#20803;&#32032;&#26679;&#24335; [&#28145;&#20837;&#27973;&#20986; Greasemonkey]</title>
      <link rel="shortcut icon" href="/favicon.ico">
      <link rel="stylesheet" href="../css/dig.css" type="text/css">
      <meta http-equiv="Link" content='&lt;../css/modern.css&gt;; type="text/css"; rel=stylesheet, &lt;../css/empty.css&gt;; type="text/css";
      rel=stylesheet'>
      <link rev="made" href="mailto:mark@diveintomark.org">
      <meta name="generator" content="DocBook XSL Stylesheets V1.68.1">
      <meta name="keywords" content="Firefox, Greasemonkey, Javascript, user script, userscript">
      <link rel="start" href="../toc/index.html" title="&#28145;&#20837;&#27973;&#20986; Greasemonkey">
      <link rel="up" href="index.html" title="&#31532;&nbsp;4&nbsp;&#31456;&nbsp;&#20844;&#20849;&#27169;&#24335;">
      <link rel="prev" href="add-css.html" title="4.13.&nbsp;&#28155;&#21152; CSS &#26679;&#24335;">
      <link rel="next" href="set-style.html" title="4.15.&nbsp;&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;">
   </head>
   <body id="diveintogreasemonkey-org" class="pattern-getcomputedstyle">
      <div class="z" id="intro">
         <div class="sectionInner">
            <div class="sectionInner2">
               <div class="s">
                  <h1><a href="/" accesskey="1">&#28145;&#20837;&#27973;&#20986; Greasemonkey</a></h1>
                  <p>&#25945;&#32769;&#32593;&#32476;&#23398;&#26032;&#25226;&#25103;</p>
               </div>
               <div class="s">
                  <ul>
                     <li><a href="../">&#36215;&#22987;&#39029;</a> &middot; 
                     </li>
                     <li><a href="../toc/">&#30446;&#24405;</a> &middot; 
                     </li>
                     <li><a href="../download/">&#19979;&#36733;</a> &middot; 
                     </li>
                     <li><a href="http://greasemonkey.mozdev.org/">&#31435;&#21363;&#19979;&#36733; Greasemonkey</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div id="main">
         <div id="mainInner">
            <p id="breadcrumb">&#24744;&#30340;&#20301;&#32622;&#65306;<a href="../">&#36215;&#22987;&#39029;</a> &#8594; <a href="../toc/index.html">&#30446;&#24405;</a> &#8594; <a href="index.html">&#20844;&#20849;&#27169;&#24335;</a> &#8594; <span class="thispage">&#33719;&#21462;&#20803;&#32032;&#26679;&#24335;</span></p>
            <div class="section" lang="zh_cn">
               <div class="titlepage">
                  <div>
                     <div>
                        <h2 class="title"><a name="pattern.getcomputedstyle" class="skip" href="#pattern.getcomputedstyle" title="link to this section"><img src="../images/permalink.gif" alt="[link]" title="link to this section" width="8" height="9"></a> 4.14.&nbsp;&#33719;&#21462;&#20803;&#32032;&#26679;&#24335;
                        </h2>
                     </div>
                     <div>
                        <div class="abstract">
                           <h3 class="title"></h3>
                           <p>&#24403;&#22810;&#20010; CSS &#35268;&#21017;&#21516;&#26102;&#24212;&#29992;&#21040;&#26576;&#20010;&#20803;&#32032;&#19978;&#26102;&#65292;&#33719;&#21462;&#36825;&#20010;&#20803;&#32032;&#30340;&#23454;&#38469;&#26679;&#24335;&#26377;&#26102;&#20505;&#26159;&#26377;&#24110;&#21161;&#30340;&#12290;&#24744;&#21487;&#33021;&#20250;&#31616;&#21333;&#30340;&#35748;&#20026;&#65292;&#36890;&#36807;&#20803;&#32032;&#30340; <code class="property">style</code> &#23646;&#24615;&#23601;&#21487;&#20197;&#24471;&#21040;&#65292;&#36825;&#26679;&#30340;&#35805;&#24744;&#23601;&#38169;&#20102;&#12290;&#23427;&#21482;&#20250;&#36820;&#22238; <code class="sgmltag-attribute">style</code> &#23646;&#24615;&#30340;&#20869;&#23481;&#12290;&#35201;&#33719;&#24471;&#20803;&#32032;&#30340;&#26368;&#32456;&#26679;&#24335;&#65288;&#21253;&#25324;&#22312;&#22806;&#37096;&#23450;&#20041;&#30340;&#26679;&#24335;&#65289;&#65292;&#24744;&#38656;&#35201;&#20351;&#29992; <code class="function">getComputedStyle</code> &#20989;&#25968;&#12290;
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <p>&#20026;&#20102;&#28436;&#31034;&#65292;&#25105;&#20204;&#21019;&#24314;&#19968;&#20010;&#31616;&#21333;&#30340;&#27979;&#35797;&#39029;&#38754;&#12290;&#23427;&#39318;&#20808;&#23545;&#39029;&#38754;&#20013;&#25152;&#26377;&#30340;  <code class="sgmltag-element">&lt;p&gt;</code> &#20803;&#32032;&#23450;&#20041;&#20102;&#21516;&#19968;&#20010;&#26679;&#24335;&#65292;&#20294;&#38543;&#21518;&#23545;&#20854;&#20013;&#30340;&#19968;&#20010;  <code class="sgmltag-element">&lt;p&gt;</code> &#20803;&#32032;&#29992;&#23427;&#30340; <code class="sgmltag-attribute">style</code> &#23646;&#24615;&#37325;&#26032;&#23450;&#20041;&#20102;&#26679;&#24335;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&#26679;&#24335;&#27979;&#35797;&#39029;&lt;/title&gt;
&lt;style type="text/css"&gt;
p { background-color: white; color: red; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id="p1"&gt;&#36825;&#34892;&#26159;&#32418;&#33394;&#30340;&#12290;&lt;/p&gt;
&lt;p id="p2" style="color: blue"&gt;&#36825;&#34892;&#26159;&#34013;&#33394;&#30340;&#12290;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
               <div class="example"><a name="example.antipattern.style" class="skip" href="#example.antipattern.style" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;4.17.&nbsp;&#33719;&#21462;&#30001;&#20803;&#32032;&#30340; <code class="sgmltag-attribute">style</code> &#23646;&#24615;&#23450;&#20041;&#30340;&#26679;&#24335;
                  </h3><pre class="programlisting ">var p1elem, p2elem;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
alert(p1elem.style.color); // &#25552;&#31034;&#20026;&#31354;&#23383;&#31526;&#20018;
alert(p2elem.style.color); // &#25552;&#31034; "blue"</pre></div>
               <p>&#29992;&#36825;&#31181;&#26041;&#27861;&#33719;&#24471;&#30340;&#20449;&#24687;&#24182;&#19981;&#26159;&#24456;&#26377;&#29992;,&#25152;&#20197;&#24744;&#19981;&#24212;&#35813;&#20877;&#29992; <code class="varname">element</code>.<code class="methodname">style</code> &#26469;&#33719;&#21462;&#21333;&#29420;&#30340;&#26679;&#24335;&#12290; (&#24744;&#21487;&#20197;&#29992;&#23427;&#26469;<span class="emphasis"><em>&#35774;&#32622;</em></span>&#20803;&#32032;&#30340;&#26679;&#24335;&#65292;&#35814;&#35265;<a href="set-style.html" title="4.15.&nbsp;&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;">&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;</a>&#12290;)
               </p>
               <p>&#37027;&#20040;&#24744;&#35813;&#29992;&#20160;&#20040;&#26041;&#27861;&#26469;&#21462;&#20195;&#23427;&#21602;&#65311;<code class="methodname">getComputedStyle()</code>&#12290;
               </p>
               <div class="example"><a name="example.pattern.getcomputedstyle" class="skip" href="#example.pattern.getcomputedstyle" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;4.18.&nbsp;&#33719;&#21462;&#20803;&#32032;&#30340;&#30495;&#23454;&#26679;&#24335;</h3><pre class="programlisting ">var p1elem, p2elem, p1style, p2style;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
p1style = getComputedStyle(p1elem, '');
p2style = getComputedStyle(p2elem, '');
alert(p1style.color); // &#25552;&#31034; "rgb(255, 0, 0)"
alert(p2style.color); // &#25552;&#31034; "rgb(0, 0, 255)"</pre></div>
               <div class="usedby">
                  <h3>&#23454;&#20363;</h3>
                  <ul>
                     <li>
                        <a href="http://diveintomark.org/projects/butler/butler.user.js">Butler</a>
                        
                     </li>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/zoomtextarea.user.js">Zoom Textarea</a>
                        
                     </li>
                  </ul>
               </div>
            </div>
            <div style="float: left">&#8592;&nbsp;<a class="NavigationArrow" href="add-css.html">&#28155;&#21152; CSS &#26679;&#24335;</a></div>
            <div style="text-align: right"><a class="NavigationArrow" href="set-style.html">&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;</a>&nbsp;&#8594;
            </div>
            <hr style="clear:both">
            <div class="footer">
               <p class="copyright">&#29256;&#26435; &copy; 2005 Mark Pilgrim &middot; <a title="&#21457;&#36865;&#32473;&#25105;&#26377;&#20110;&#27492;&#20070;&#30340;&#21453;&#39304;&#24847;&#35265;" href="mailto:mark@diveintomark.org">mark@diveintomark.org</a> &middot; <a href="../license/gpl.html" title="GNU &#36890;&#29992;&#20844;&#20849;&#35768;&#21487;&#35777;">&#20351;&#29992;&#26465;&#27454;</a></p>
            </div>
         </div>
      </div>
   </body>
</html>